import React, { PureComponent } from 'react'
import { Steps } from 'antd'
import { DataSource, FieldMap } from './page-components'
import styles from './index.less'

const { Step } = Steps

class OfflineCreate extends PureComponent {
  constructor(props) {
    super(props)
    this.state = {
      currentStep: 0,
      data: this.props.data,
      oldData: this.props.data,
    }
  }

  componentDidMount() {
    const { data } = this.props
    this.setState({
      data,
      oldData: data,
    })
  }

  currentStepChange = (currentStep, value) => {
    const { data } = this.state
    const newData = data ? { ...data } : {}
    this.setState({
      currentStep,
      data: { ...newData, ...value },
    })
  }

  returnStep = (currentStep) => {
    this.setState({
      currentStep,
    })
  }

  render() {
    const {
      currentStep, data, oldData,
    } = this.state
    const { offlineDetail, taskNode } = this.props
    const content = [
      {
        title: '数据源配置',
        content: <DataSource style={{ display: currentStep === 0 ? 'block' : 'none' }} currentStep={currentStep} data={data} currentStepChange={this.currentStepChange} />,
      },
      {
        title: '字段映射',
        content: <FieldMap taskNode={taskNode} offlineDetail={offlineDetail} style={{ display: currentStep === 1 ? 'block' : 'none' }} currentStep={currentStep} returnStep={this.returnStep} oldData={oldData || {}} data={data || {}} currentStepChange={this.currentStepChange} />,
      },
    ]
    return (
      <div className={styles.offline_create}>
        <div className={styles.container}>
          <Steps size="small" className={styles.step} current={currentStep}>
            {content.map((item, key) => <Step key={key} title={item.title} />)}
          </Steps>
          {content.map((item) => item.content)}
        </div>
      </div>
    )
  }
}

export default OfflineCreate
